<template>
  <div class="settingPage">
    <van-nav-bar
      title="设置"
      left-arrow
      @click-left="goBackHandle"
      :fixed="true"
      :border="false"
      :safe-area-inset-top="true"
      style="padding-top: 0px"
    >
    </van-nav-bar>
    <div class="dataContent">
      <div class="content">
        <div @click="goLeave(1)" class="iconItem">
          <van-icon name="manager-o" size="30" />
          <p>账号</p>
        </div>
        <div @click="goLeave(2)" class="iconItem" v-if="role == 2">
          <van-icon name="cluster-o" size="30" />
          <p>成员管理</p>
        </div>
        <div @click="goLeave(3)" class="iconItem" v-if="role == 2">
          <van-icon name="calendar-o" size="30" />
          <p>假期管理</p>
        </div>
        <div @click="goLeave(4)" class="iconItem" v-if="role == 2">
          <van-icon name="desktop-o" size="30" />
          <p>加班管理</p>
        </div>
        <div @click="goLeave(6)" class="iconItem" v-if="role == 2">
          <van-icon name="comment-circle-o" size="30" />
          <p>漏打卡管理</p>
        </div>
        <div @click="goLeave(5)" class="iconItem" v-if="role == 2">
          <van-icon name="bar-chart-o" size="30" />
          <p>统计</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import backMixin from '@/backMixin'
export default {
  name: 'settingPage',
  mixins: [backMixin],
  data() {
    return {
      role: ''
    }
  },
  created() {
    console.log('ddddd', this.$route.params)
    this.role = JSON.parse(
      window.localStorage.getItem('attendance-records')
    ).role
  },
  mounted() {},
  methods: {
    // 点击返回按钮
    goBackHandle() {
      if (this.role == 2) {
        this.finishInApp()
      } else {
        this.$router.go(-1)
      }
    },
    // 判断当前系统是否为iOS系统
    IsIOS() {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        return true
      } else {
        return false
      }
    },
    // 判断当前系统是否安卓系统
    IsAndroid() {
      if (/(Android|Adr)/i.test(navigator.userAgent)) {
        return true
      } else {
        return false
      }
    },
    finishInApp() {
      this.$router.push({ name: 'login' })
      // if (this.IsIOS()) {
      //   window.webkit.messageHandlers.LinkToDfitcNativeFunction.postMessage(
      //     '9918'
      //   )
      // } else if (this.IsAndroid()) {
      //   window.smartinfo.LinkToDfitcNativeFunction('9918')
      // }
    },
    // 点击图标
    goLeave(val) {
      if (val === 1) {
        // 跳转到账号页面
        this.$router.push('/accountPage')
        console.log('1111111111111')
      } else if (val === 2) {
        // 跳转到成员管理页面
        this.$router.push('/management')
      } else if (val === 3) {
        // 跳转到假期管理页面
        this.$router.push({
          name: 'leaveManger',
          params: {
            ApplicantType: '假期管理'
          }
        })
      } else if (val === 4) {
        // 跳转到加班管理页面
        this.$router.push({
          name: 'leaveManger',
          params: {
            ApplicantType: '加班管理'
          }
        })
      } else if (val === 5) {
        // 跳转到统计管理页面
        this.$router.push({
          name: 'comparExcel'
        })
      } else if (val === 6) {
        // 跳转到漏打卡管理页面
        this.$router.push({
          name: 'leaveManger',
          params: {
            ApplicantType: '漏打卡管理'
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.settingPage:deep {
  margin: 0;
  padding: 0;
  .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
  .van-nav-bar__content {
    .van-nav-bar__title {
      font-size: 18px;
    }
  }
  .dataContent {
    margin-top: 46px;
    padding: 30px 0 20px;
    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 10px;
      // justify-content: start;
      .iconItem {
        font-size: 0.42667rem;
        text-align: center;
        /* padding-left: 0.8rem; */
        width: 30%;
        .van-icon {
          padding: 10px;
          background: #e3efff;
          border-radius: 30px;
        }
      }
    }
  }
}
</style>
